<template>
	<view class="warp">
		<!-- #ifdef APP-PLUS -->
		<statusBar></statusBar>
		<!-- #endif -->
		<!-- 顶部导航 -->
		<u-navbar @rightClick="rightClick"  :autoBack="true" >
		</u-navbar>
		<!-- banner -->
		<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
			field="_id,bannerfile,open_url,title" @load="onqueryload">
			<!-- 当无banner数据时显示占位图 -->
			<image v-if="!(loading||data.length)" class="banner-image" src="/static/uni-center/headers.png" mode="aspectFill" :draggable="false" />
			
			<swiper v-else class="swiper-box" @change="changeSwiper" :current="current" indicator-dots>
				<swiper-item v-for="(item, index) in data" :key="item._id">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</unicloud-db>
		
		<!-- 帖子列表 -->
		<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
			collection="NeuHelper-PostComments"  field="post_id,comment_content,comment_date,_id" where="user_id==$cloudEnv_uid"  :page-size="10"
			>
			<!-- 基于 uni-list 的页面布局 field="user_id.nickname"-->
			<uni-list class="uni-list" :border="false" :style="{height:listHight}">
				
				<!-- 作用于app端nvue页面的下拉加载 -->
				<!-- #ifdef APP-NVUE -->
				<refreshBox @refresh="refresh" :loading="loading"></refreshBox>
				<!-- #endif -->
		
				<!-- 列表渲染 --> 
				<uni-list-item  v-for="(item,index) in data" :key="index">
					<!-- 通过body插槽定义布局 -->
					<template v-slot:body>
						<view class="main"> <!-- 4.13  我的评论右键删除，添加方式：删除帖子、跳转详情使用方式跳转-->
						      <u-swipe-action @tap="clickDeleteCommnt(item._id)">
						        <u-swipe-action-item :options="options" >
						          <view class="swipe-action u-border-top u-border-bottom">
						            <view class="swipe-action__content" @tap.stop="toDetail(item.post_id)" >
										<text class="title" >{{item.comment_content}}</text>
										<view class="info"> <!-- 发布人应该随不同模块而改变-->
											<uni-dateformat class="last_modify_date" :date="item.comment_date"
												format="yyyy-MM-dd" :threshold="[60000, 2592000000]" />
										</view>
						            </view>
						          </view>
						        </u-swipe-action-item>
						      </u-swipe-action>
							</view>
					</template>
				</uni-list-item>
				<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
				<!-- #ifdef APP-PLUS -->
				<uni-list-item>
					<template v-slot:body>
				<!-- #endif -->
						<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}"
							@loadMore="loadMore">
						</uni-load-state>
				<!-- #ifdef APP-PLUS -->
					</template>
				</uni-list-item>
				<!-- #endif -->
			</uni-list>
		</unicloud-db>
</view>
</template>

<script>
	let cdbRef;
	const db = uniCloud.database();
export default {
	computed: {
		colList(){
			return [
				db.collection('NeuHelper-Posts').where("category_id == '642d7f6ce766bb2975cd4dfb'").getTemp(),
				db.collection('uni-id-users').field('_id,nickname').getTemp()
			]
		}
	},
	data() {
		return {
			navBarShow:false,
			showRefresh: false,
			listHight: 0, // 校园资讯列表高度
			current: 0, // 当前轮播图索引
			options: [ {
						text: '删除',
						style: {
							backgroundColor: '#f56c6c'
						}
					}]
		}
	},
	// 悬停
	onPageScroll(res) {
		if (res.scrollTop > 100) {
			this.navBarShow = true;
		} else {
			this.navBarShow = false;
		}
	},
	async onLoad() {
		// #ifdef APP-NVUE
		/* 可用窗口高度 - 搜索框高 - 状态栏高 */
		this.listHight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50 + 'px';
		// #endif
		// #ifndef APP-NVUE
		this.listHight = 'auto'
		// #endif
		cdbRef = this.$refs.udb
	},
	// 4.13顶部下拉事件
	onPullDownRefresh() {
		this.$refs.udb.loadData({
				clear: true
			}, () => {
				// 停止下拉刷新
				uni.stopPullDownRefresh()
			})
	},
	methods:{
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		toDetail(post_id){
			console.log('跳转详情')
			this.navigateTo('/subpages/InquiryInfo/InquiryInfo?id=' + post_id);
		},
		async clickDeleteCommnt(comment_id){
			console.log('触发删除')
			// 调用API进行更新
			const db =  uniCloud.databaseForJQL()
			try {
				await db.collection("NeuHelper-PostComments").where("user_id== $cloudEnv_uid &&_id=='"+ comment_id+"'").remove()
			} catch (e) {
				uni.showModal({
					title: '提示',
					content: e.message
				})
			}
			uni.showToast({
				title: "删除成功",
				icon: "success",
				duration: 1000,
			});
		},
		/**
		 * banner加载后触发的回调
		 */
		onqueryload(data) {
		},
		changeSwiper(e) {
			this.current = e.detail.current
		},
		//  点击banner的处理
		clickBannerItem(item) {
			// 有外部链接-跳转url
			if (item.open_url) {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/common/webview/webview?url=' + item.open_url + '&title=' + item.title,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
			// 其余业务处理
		},
		goHome() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		refresh() {
			cdbRef.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
				// #ifdef APP-NVUE
				this.showRefresh = false
				// #endif
				console.log('end');
			})
			console.log('refresh');
		},
		loadMore() {
			cdbRef.loadMore()
		}
	}
};
</script>

<style lang="scss">
	/* #ifdef APP-NVUE */
	.warp {
		background-color: #fff;
	}
	/* #endif */
	.banner-image {
		width: 750rpx;
		height: 400rpx;
	}
	.swiper-box {
		height: 400rpx;
	}
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	/* #endif */
	.pages {
		background-color: #FFFFFF;
	}
	
	.avatar {
		width: 200rpx;
		height: 200rpx;
		margin-right: 10rpx;
	}
	
	.main {
		justify-content: space-between;
		flex: 1;
	}
	
	.title {
		font-size: 16px;
	}
	
	.info {
		flex-direction: row;
		justify-content: space-between;
	}
	
	.author,
	.last_modify_date {
		font-size: 14px;
		color: #999999;
	}
	.u-page {
        padding: 0;
    }

    .u-demo-block__title {
        padding: 10px 0 2px 15px;
    }

    .swipe-action {
        &__content {
             padding: 25rpx 0;
    
            &__text {
                 font-size: 15px;
                 color: $u-main-color;
                 padding-left: 30rpx;
             }
        }
    }
</style>
